<template>
 <div v-if="data.loginedUserInfo!=undefined">
  <div v-if="!data.isMobile" style="width: 300px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-top: 20px;display: inline-block;">
    <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);">
      菜单
    </div>
    <div style="padding: 10px 10px;">
      <div class="right-button" @click="exitLogin">
          退出登录
          <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
      </div>
      <div class="right-button" @click="openChangeUserInfoPage">
          修改考生信息
          <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
      </div>
      <div class="right-button" @click="changePassword">
          修改密码
          <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
      </div>
    </div>
  </div>
  <div v-if="data.loginedUserInfo!=undefined && !data.isMobile" style="width: calc(100% - 320px);float: right;display: inline-block;">
    <div style="margin-top: 20px;width: calc(100%);border-radius: 5px;padding: 0px 0px;color: black;position: relative;margin-bottom: 20px;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(https://api.dujin.org/bing/1920.php);overflow: hidden;">
      <div style="background-color: rgba(255,255,255,0.8);backdrop-filter: blur(20px);padding: 20px 20px;">
<div style="font-size: 20px;margin-bottom: 20px;">
      考生信息
    </div>
    <div class="user-info-edit" style="position: absolute;right: 20px;top: 20px;" @click="openChangeUserInfoPage">
      <svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 40a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2a1 1 0 011-1h38zM28.87 3.886l.132.12 6.868 6.905a2 2 0 01-.004 2.825l-.739.738.013.014L13.628 36H6a2 2 0 01-1.995-1.85L4 34v-7.628l20.778-20.94-.019-.019 1.41-1.41a2 2 0 012.702-.117zm-7.107 10.206L8.065 28.06v.006l3.87 3.87h.006l13.825-13.84-4.003-4.003zm5.774-5.887l-2.972 3.031 4.029 4.03 2.989-2.993-4.046-4.068z" fill="currentColor"/></svg>
    </div>
    <div style="position: relative;">
      <div style="width: calc(50% - 5px);display: inline-block;height: 100%;font-size: 14px;">
        <div>
          姓名
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.name }}
          </div>
        </div>
        <div>
          身份证号
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.idNumber }}
          </div>
        </div>
        <div>
          分数
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.score }}
          </div>
        </div>
      </div>
      <div style="width: calc(50% - 5px);display: inline-block;float: right;height: 100%;">
        <div>
          位次
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.ranking }}
          </div>
        </div>
        <div>
          身体受限情况
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            <span v-if="data.loginedUserInfo.isSM==0 && data.loginedUserInfo.isSR==0">无</span>
            <span v-if="data.loginedUserInfo.isSM==0 && data.loginedUserInfo.isSR==1">色弱</span>
            <span v-if="data.loginedUserInfo.isSM==1 && data.loginedUserInfo.isSR==0">色盲</span>
            <span v-if="data.loginedUserInfo.isSM==1 && data.loginedUserInfo.isSR==1">色盲、色弱</span>
          </div>
        </div>
        <div>
          选科
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ getSubjectString() }}
          </div>
        </div>
      </div>
    </div>
      </div>
    
    </div>
    <div v-if="data.loginedUserInfo.isVip==0" style="width: 100%;padding: 20px 20px;background-color: rgb(242,242,242);border-radius: 5px;margin-bottom: 100px;">
      <div style="font-size: 20px;margin-bottom: 10px;">
        激活VIP
      </div>
      <div style="line-height: 30px;margin-bottom: 10px;">
        请将VIP卡上红框内的序列号填入下面的输入框中。
      </div>
      <div style="text-align: center;margin-bottom: 10px;">
        <img style="width: 500px;" src="../assets/example.png" alt="">
      </div>
      <div style="line-height: 35px;">
        VIP卡上的序列号：<a-input style="border: 0;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;height: 35px;background-color: rgba(0,0,0,0);margin-bottom: 10px;" placeholder="XXXXX-XXXXX-XXXXX-XXXXX-XXXXX" allow-clear v-model="keyString"></a-input>
        <div style="text-align: right;">
          <a-button style="padding: 0 30px;" type="primary"  status="danger" @click="positiveAccount" :loading="isPositiving">激活</a-button>
        </div>
      </div>
    </div>
    <div v-if="data.loginedUserInfo.isVip==1" style="width: 100%;padding: 20px 20px;border-radius: 5px;background-color: red;">
      <div style="font-size: 20px;;margin-bottom: 0px;color: white;">
        此账号已激活VIP
      </div>
    </div>
  </div>
  <div v-if="data.isMobile" style="width: 100%;height: 100%;overflow-y: scroll;padding: 10px 10px;">
    <div style="margin-top: 10px;width: calc(100%);border-radius: 5px;color: black;position: relative;margin-bottom: 10px;overflow: hidden;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(https://api.dujin.org/bing/1920.php);">
      <div style="padding: 20px 20px;background-color: rgba(255,255,255,0.8);backdrop-filter: blur(20px);">
 <div style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">
      考生信息
    </div>
    <div class="user-info-edit" style="position: absolute;right: 20px;top: 20px;" @click="openChangeUserInfoPage">
      <svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M43 40a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2a1 1 0 011-1h38zM28.87 3.886l.132.12 6.868 6.905a2 2 0 01-.004 2.825l-.739.738.013.014L13.628 36H6a2 2 0 01-1.995-1.85L4 34v-7.628l20.778-20.94-.019-.019 1.41-1.41a2 2 0 012.702-.117zm-7.107 10.206L8.065 28.06v.006l3.87 3.87h.006l13.825-13.84-4.003-4.003zm5.774-5.887l-2.972 3.031 4.029 4.03 2.989-2.993-4.046-4.068z" fill="currentColor"/></svg>
    </div>
    <div style="position: relative;">
      <div style="width: calc(100%);display: inline-block;font-size: 14px;">
        <div>
          姓名
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.name }}
          </div>
        </div>
        <div>
          身份证号
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.idNumber }}
          </div>
        </div>
        <div>
          分数
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.score }}
          </div>
        </div>
      </div><br>
      <div style="width: calc(100%);display: inline-block;">
        <div>
          位次
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ data.loginedUserInfo.ranking }}
          </div>
        </div>
        <div>
          身体受限情况
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            <span v-if="data.loginedUserInfo.isSM==0 && data.loginedUserInfo.isSR==0">无</span>
            <span v-if="data.loginedUserInfo.isSM==0 && data.loginedUserInfo.isSR==1">色弱</span>
            <span v-if="data.loginedUserInfo.isSM==1 && data.loginedUserInfo.isSR==0">色盲</span>
            <span v-if="data.loginedUserInfo.isSM==1 && data.loginedUserInfo.isSR==1">色盲、色弱</span>
          </div>
        </div>
        <div>
          选科
          <div style="width: 100%;line-height: 40px;border-radius: 5px;background-color: rgba(255,255,255,0.1);padding: 0 20px;margin-top: 10px;font-size: 16px;margin-bottom: 10px;">
            {{ getSubjectString() }}
          </div>
        </div>
      </div>
    </div>
      </div>
   
    </div>
    <div v-if="data.loginedUserInfo.isVip==0" style="width: 100%;padding: 20px 20px;background-color: rgb(242,242,242);border-radius: 5px;margin-bottom: 10px;">
      <div style="font-size: 20px;margin-bottom: 10px;">
        激活VIP
      </div>
      <div style="line-height: 30px;margin-bottom: 10px;">
        请将VIP卡上红框内的序列号填入下面的输入框中。
      </div>
      <div style="text-align: center;margin-bottom: 10px;">
        <img style="width: 100%;" src="../assets/example.png" alt="">
      </div>
      <div style="line-height: 35px;">
        请输入VIP卡上的序列号<a-input style="border: 0;border-bottom: 1px solid rgb(0,120,215);padding: 0 0;height: 35px;background-color: rgba(0,0,0,0);margin-bottom: 10px;" placeholder="XXXXX-XXXXX-XXXXX-XXXXX-XXXXX" allow-clear v-model="keyString"></a-input>
        <div style="text-align: right;">
          <a-button style="padding: 0 30px;" type="primary"  status="danger" @click="positiveAccount" :loading="isPositiving">激活</a-button>
        </div>
      </div>
    </div>
    <div v-if="data.loginedUserInfo.isVip==1" style="width: 100%;padding: 20px 20px;border-radius: 5px;background-color: red;margin-bottom: 10px;">
      <div style="font-size: 20px;margin-bottom: 0px;color: white;">
        此账号已激活VIP
      </div>
    </div>
    <div style="width: 100%;padding: 0px 0px;margin-top: 0px;">
        <div style="border-radius: 5px;padding: 15px 15px;background-color: rgba(230,230,230);color: black;" @click="exitLogin">
            退出登录
        </div>
    </div>
    <div style="padding:20px 20px;border-radius:5px;background-color: #fff;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transform: translateX(0px);text-align: center;width: 100%;margin-top: 20px;">
          <a-button @click="openDAppPage">下载App(密码：2355)</a-button>
        </div>
  </div>
 </div>
</template>

<script>
import jsCookie from 'js-cookie';
import axios from 'axios';
import sha256 from 'sha256';


export default{
  data(){
    return{
      keyString:'',
      isPositiving:false,
    }
  },
  mounted(){
    if(this.data.loginedUserInfo==undefined){
      this.changePage(7)
      return;
    }
  },
  methods:{
    openDAppPage(){
      window.open('https://url22.ctfile.com/f/41675622-971266876-7b725a?p=2355','blank');
    },
    changePassword(){
      let op = ''
      let np = ''
      while(1){
        while(1){
          op = prompt("请输入原密码")
          if(op!=''){
            break
          }else{
            alert("原密码不能为空")
          }
        }
        while(1){
          np = prompt("请输入新密码")
          if(np!=''){
            break
          }else{
            alert("新密码不能为空")
          }
        }
        let np2 = prompt("请再次输入新密码")
        if (np != np2) {
          alert("两次输入的新密码不一致")
        }else{
          if(np2==''){
            alert("再次输入新密码不能为空")
          }else{
            break
          }
        }
      }
      // console.log(sha256(op))
      axios.post("/api/v1/user/changePassword?data=" + JSON.stringify({
        account:this.data.loginedUserInfo.account,
        op:sha256(op),
        np:sha256(np)
      })).then(res=>{
        if(res.data.status==1){
          this.exitLogin()
          alert("修改成功，请重新登录")
        }else{
          alert(res.data.content)
        }
      })
    },
    positiveAccount(){
      if(this.keyString==''){
        this.$message.error({
          content:'请输入序列号',
        })
        return;
      }
      let num = 0;
      for(let i=0;i<this.keyString.length;i++){
        if(this.keyString.slice(i,i+1)=='-'){
          num+=1;
        }
      }
      if(num!=4 || this.keyString.length!=29){
        this.$message.error({
          content:'序列号格式有误'
        })
        return;
      }
      this.isPositiving=true;
      var config = {
   method: 'post',
   url: '/api/v1/vip/positive?data=' + JSON.stringify({
    account:this.data.loginedUserInfo.account,
    keyString:this.keyString
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res)=> {
  this.isPositiving=false;
   if(res.data.status==1){
    window.location.reload();
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    exitLogin(){
      jsCookie.remove("loginedUserInfo");
      window.location.reload();
    },
    getSubjectString(){
      if(this.data.loginedUserInfo.subjects.slice(0,1)=='1'){
                let re = '';
                for(let i=1;i<=3;i++){
                  if(i!=1){
                    re+='、'
                  }
                  switch (this.data.loginedUserInfo.subjects.slice(i,i+1)) {
                    case '1':
                      re+='物理';
                      break;
                    case '2':
                      re+='化学';
                      break;
                    case '3':
                      re+='生物';
                      break;
                    case '4':
                      re+='政治';
                      break;
                    case '5':
                      re+='历史';
                      break;
                    case '6':
                      re+='地理';
                      break;
                  }
                }
                return re;
      }
      if(this.data.loginedUserInfo.subjects.slice(0,1)=='2'){
                let re = '';
                for(let i=1;i<=3;i++){
                  if(i!=1){
                    re+='、'
                  }
                  switch (this.data.loginedUserInfo.subjects.slice(i,i+1)) {
                    case '1':
                      re+='化学';
                      break;
                    case '2':
                      re+='生物';
                      break;
                    case '3':
                      re+='政治';
                      break;
                    case '4':
                      re+='地理';
                      break;
                    case '5':
                      re+='物理';
                      break;
                    case '6':
                      re+='历史';
                      break;
                  }
                }
                return re;
      }
      if(this.data.loginedUserInfo.subjects.slice(0,1)=='3'){
        return this.data.loginedUserInfo.subjects.slice(1,2)=='1'?'理科':'文科';
      }
    }
  },
  props:{
    data:{
      type:Object
    },
    openChangeUserInfoPage:{
      type:Function
    },
    changePage:undefined
  },
}
</script>

<style scoped>

.menu-item:hover{
    background-color: rgb(0,110,205);
}

.menu-item{
    width: 100%;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(0,120,215);
    color: white;
    position: relative;
}

.university-item:active{
    scale: 0.99;
}

.university-item{
    transition: scale .1s;
}

.right-button svg{
  position: absolute;
  right: 15px;
  top: 15px;
}

.right-button:hover{
  background-color: rgb(242,242,242);
}

.right-button{
  width: 100%;
  padding: 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 15px;
  position: relative;
  margin-bottom: 5px;
}

.user-info-edit:active{
  scale: 0.98;
}

.user-info-edit:hover{
  background-color: rgba(255,255,255,0.1);
}

.user-info-edit{
  position: absolute;
  right: 20px;
  top: 20px;
  display: inline-block;
  cursor: pointer;
  transition: all .1s;
  padding: 5px 5px;
}

</style>